<!--
 * @Author: wangding
 * @Date: 2020-11-05 14:33:11
 * @LastEditTime: 2021-03-12 17:19:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\batteryViews\status.vue
-->
<template>
    <div class="batter-status-main-box" v-loading="loading">
        <div class="left-sub-box"  >
            <div class="title-box">
                <div>{{$t('batteryAnalysis.title')}}</div>
                <div>
                    
                    <a href="javascript:;" @click='tractTime'><i class="el-icon-arrow-left"></i></a>
                    <el-date-picker
                    v-model="value1"
                    type="date"
                    :placeholder="$t('selectDate')"
                    value-format='yyyy-MM-dd'
                    @change='changeDateTime'
                    :clearable='false'
                    :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                    <a href="javascript:;" @click='addTime' ><i class="el-icon-arrow-right"></i></a>
                </div>
            </div>
            <!-- :style="returnWindowWidth" -->
            <div class="echarts-box" id='echartsBox' >
            </div>
        </div>
        <div class="right-sub-box">
            <div class="title-box">
                <i class="iconfont icon-liebiao"></i>
                <span>{{$t('batteryAnalysis.title')}}</span>
            </div>
            <div class="content-box">
                <div class="img-box">
                    <span class="data-text">{{deviceDataList.batteryCapacity || 0.00}}%</span>
                    <div class="percentage-box" :style="batteryHeight"></div>
                </div>
                <div class="text-center-box">
                    <div>
                        <span class="grey-color">{{$t('batteryAnalysis.type')}}</span> <span class="green-color">{{returnBatteryName(deviceDataList.batteryType)}}</span>
                    </div>
                    <div>
                        <span class="grey-color">{{$t('batteryAnalysis.v_change')}}</span> <span class="green-color">{{deviceDataList.batVoltage1 | num2}}V</span>
                    </div>
                    <div>
                        <span class="grey-color">{{$t('batteryAnalysis.a_change')}}</span> <span class="green-color">{{deviceDataList.batCurrent1 | num2}}A</span>
                    </div>
                    <div>
                        <span class="grey-color">{{$t('batteryAnalysis.p_change')}}</span> <span class="green-color">{{deviceDataList.batPower1 | num2}}W</span>
                    </div>
                    <div>
                        <span class="grey-color">{{$t('batteryAnalysis.t_change')}}</span> <span class="green-color">{{deviceDataList.temperBoard1 | num2}}℃</span>
                    </div>
                    <div>
                        <span class="grey-color">{{$t('batteryAnalysis.c_change')}}</span> <span class="green-color">{{deviceDataList.batteryCapacity | num2}}%</span>
                    </div>
                    <div>
                        <span class="grey-color">{{$t('lastUpdateTime')}}</span> <span class="green-color" style="font-size:15px;">{{deviceDataList.uploadTimeValue}}</span>
                    </div>
                    <!-- 厂商显示 -->
                    <div >
                        <a v-if='returnUserType == 2? true:false' href="javascript:;" style="color:#ED7523;" @click='dialogVisible = true'> {{$t('index.viewAll')}}> > </a> <span class="green-color" style="font-size:15px;"></span>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog
        :title="$t('batteryAnalysis.title')"
        :visible.sync="dialogVisible"
        width="30%"
        >
            <div class="modal-box-center">
                <div>
                    <div class="name">{{$t('battery.atteryType')}}</div>
                    <div>{{returnBatteryName(deviceDataList.batteryType)}}</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.v_change')}}</div>
                    <div>{{deviceDataList.batVoltage1 | num2}}V</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.a_change')}}</div>
                    <div>{{deviceDataList.batCurrent1 | num2}}A</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.p_change')}}</div>
                    <div>{{deviceDataList.batPower1 | num2}}W</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.t_change')}}</div>
                    <div>{{deviceDataList.temperBoard1 | num2}}℃</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.BatteryCellTemperatureHigh')}}</div>
                    <div>{{deviceDataList.batteryCellTemperatureHigh | num2}}℃</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.BatteryCellTemperatureLow')}}</div>
                    <div>{{deviceDataList.batteryCellTemperatureLow | num2}}℃</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.BatteryCellVoltageHigh')}}</div>
                    <div>{{deviceDataList.batteryCellVoltageHigh | num2}}V</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.BatteryCelivoltageLow')}}</div>
                    <div>{{deviceDataList.batteryCellVoltageLow | num2}}V</div>
                </div>
                <div>
                    <div class="name">{{$t('batteryAnalysis.BatteryHealth')}}</div>
                    <div>{{deviceDataList.batteryHealth}}</div>
                </div>
                <div>
                    <div class="name" style='color:#606266;'>{{$t('lastUpdateTime')}}</div>
                    <div>{{deviceDataList.uploadTimeValue}}</div>
                </div>


            </div>
        </el-dialog>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    components: {

    },
    props: {

    },
    data() {
        return {
            loading:false,
            vData:[],//电压
            aData:[],//电流
            pData:[],//功率
            cData:[],//剩余容量
            tData:[],//时间轴
            value1:moment().format("YYYY-MM-DD"),
            batteryList:[],
            dialogVisible:false,
            pickerOptions:{ //禁用今天之后的时间
                disabledDate(time) {
                    return time.getTime() > Date.now()
                }
            }
        };
    },
    computed: {
        deviceDataList(){
            let data = JSON.parse(JSON.stringify(this.$store.state.sysStore.deviceDataList))
            if(data.dataReference==1){
				data.batVoltage1=data.bmsBatVoltage;
				data.batCurrent1=data.bmsBatCurrent;
				data.batPower1=data.bmsBatPower;
			}
            return data
        },
        batteryHeight(){
            return `height:${this.$store.state.sysStore.deviceDataList.batteryCapacity}%;`
        },
        returnUserType(){
            return localStorage.getItem('userType')
        },
        returnWindowWidth(){
            return `width: ${document.documentElement.clientWidth*(17/24)}px;` 
        }
    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.batteryGetBatteryData()
        this.getDictionaryBatch()
        
    },
    methods: {
        returnNowTime(){
            return moment().format("YYYY-MM-DD")
        },
        tractTime(){
            console.log(moment(this.value1).subtract(1, 'days').format('YYYY-MM-DD'),'moment');
            this.value1 = moment(this.value1).subtract(1, 'days').format('YYYY-MM-DD')
            this.changeDateTime()
        },
        addTime(){
            if(this.value1 == this.returnNowTime()? true:false){
                return
            }
            this.value1 = moment(this.value1).add(1, 'days').format('YYYY-MM-DD')
            this.changeDateTime() 
        },
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'BATTERY_TYPE',
                lang:localStorage.getItem('lan')
            })
            this.batteryList = res.BATTERY_TYPE || []
        },
        returnBatteryName(val){
            let code = ''
            this.batteryList.forEach(item =>{
                if(item.value == val){
                    code = item.code
                }
            })
            return code
        },
        changeDateTime(items){
            this.batteryGetBatteryData()
        },
        async batteryGetBatteryData(){
            this.loading = true
            let res = await this.API.batteryGetBatteryData({
                sn:sessionStorage.getItem('selRow_inverter_sn'),
                datestr:this.value1,
                firmId:sessionStorage.getItem('selRow_firmId'),
            })
            if(res&&res.length>0){
                this.vData = res.map(item=>{return item.batVoltage1 || 0})
                this.aData = res.map(item=>{return item.batCurrent1 || 0})
                this.pData = res.map(item=>{return item.batPower1 || 0})
                this.cData = res.map(item=>{return item.batteryCapacity || 0})
                this.tData = res.map(item=>{return moment(item.uploadTimeValue).format("HH:mm");})
                // moment(this.currentDate).format("YYYY-MM-DD HH:mm");
            }else{
                this.vData = []
                this.aData = []
                this.pData = []
                this.cData = []
                this.tData = []
            }
            this.initEcharts()
            this.loading = false
        },
        initEcharts(){
            var timeData = this.tData;
            timeData = timeData.map(function (str) {
                return str.replace('2019-', '');
            });
            let option  = {
                color:['#EB6206', '#6CA918', '#FDB60E','#18A75E'],
                tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        }
                    },
                grid: {
                    left:'10%',
                    right:'25%',
                    bottom:'15%'
                    },
                legend: {
                        itemWidth: 20,
                        itemHeight: 15,
                        icon: 'circle',
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100
                    }
                ],
                toolbox: {
            　　　　show:true,
            　　　　feature:{
            　　　　　dataZoom: {
                        title:"缩放",                       
                        // xAxisIndex:0,                      
                        yAxisIndex:false,
            　　　　　},
            　　　　}
            　　　},
                xAxis : [
                    {
                    
                        type : 'category',
                        axisTick: {
                                alignWithLabel: true
                        },
                        data: timeData
                    }
                ],
            }
            if(sessionStorage.getItem('selRow_batteryTypeFlag') !== '0'){
                option.series = [
                    {
                        name:this.$t('batteryAnalysis.v_change')+'(V)',
                        type:'line',
                        symbolSize: 0,
                        smooth: false,
                        data:this.vData,
                    },
                    {
                        name:this.$t('batteryAnalysis.a_change')+'(A)',
                        type:'line',
                        yAxisIndex: 1,
                        symbolSize: 0,
                        smooth: false,
                        data:this.aData,
                    },
                    {
                        name:this.$t('batteryAnalysis.p_change')+'(W)',
                        type:'line',
                        yAxisIndex: 2,
                        symbolSize: 0,
                        smooth: false,
                        data: this.pData
                    },
                    {
                        name:this.$t('batteryAnalysis.lc_change')+'(%)',
                        type:'line',
                        yAxisIndex: 3,
                        symbolSize: 0,
                        smooth: false,
                        data: this.cData
                    }
                ]
                option.yAxis = [
                    {
                        name : this.$t('batteryAnalysis.v_change')+'(V)',
                        type : 'value',
                        inverse: false,
                        // interval : 25,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: true
                        },
                        position: 'left',
                        nameGap: 15,//name距离顶部位置
                        nameTextStyle:{
                            padding: [0, 0, 0, 30]//name的位置
                        },
                    },
                    {
                        name : this.$t('batteryAnalysis.a_change')+'(A)',
                        type : 'value',
                        // interval : 20,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: false
                        },
                        position: 'left',
                        offset: 55,
                        nameGap: 35,
                    },
                    {
                        name : this.$t('batteryAnalysis.p_change')+'(W)',
                        type : 'value',
                        inverse: false,
                        // interval : 1,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: false
                        },
                        // max: 10000,
                        position: 'right',
                        offset:20,
                        nameGap: 15,
                    },
                    {
                        name : this.$t('batteryAnalysis.lc_change')+'(%)',
                        type : 'value',
                        inverse: false,
                        // interval : 1,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: false
                        },
                        position: 'right',
                        offset:90,
                        nameGap: 35,
                        max: 100,
                        nameTextStyle:{
                            padding: [0, 0, 0, 20]//name的位置
                        },
                    }
                ]
            }else{
                option.series = [
                    {
                        name:this.$t('batteryAnalysis.v_change')+'(V)',
                        type:'line',
                        symbolSize: 0,
                        smooth: true,
                        data:this.vData,
                    },
                    {
                        name:this.$t('batteryAnalysis.a_change')+'(A)',
                        type:'line',
                        yAxisIndex: 1,
                        symbolSize: 0,
                        smooth: true,
                        data:this.aData,
                    },
                    {
                        name:this.$t('batteryAnalysis.p_change')+'(W)',
                        type:'line',
                        yAxisIndex: 2,
                        symbolSize: 0,
                        smooth: true,
                        data: this.pData
                    }
                ]
                option.yAxis = [
                    {
                        name : this.$t('batteryAnalysis.v_change')+'(V)',
                        type : 'value',
                        inverse: false,
                        // interval : 25,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:true
                        },
                        splitLine: {
                            show: true
                        },
                        position: 'left',
                        nameGap: 15,//name距离顶部位置
                        nameTextStyle:{
                            padding: [0, 0, 0, 30]//name的位置
                        },
                    },
                    {
                        name : this.$t('batteryAnalysis.a_change')+'(A)',
                        type : 'value',
                        // interval : 20,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: false
                        },
                        position: 'left',
                        offset: 55,
                        nameGap: 15,
                    },
                    {
                        name : this.$t('batteryAnalysis.p_change')+'(W)',
                        type : 'value',
                        inverse: false,
                        // interval : 1,//强制设置坐标轴分割间隔。
                        axisTick:{       //x轴刻度线
                            show:false
                        },
                        splitLine: {
                            show: false
                        },
                        // max: 10000,
                        position: 'right',
                        offset:20,
                        nameGap: 15,
                    }
                ]
            }
            this.$nextTick(()=>{
                let myChart = this.echarts.init(document.getElementById("echartsBox"));
                // option.legend.selected[this.$t('batteryAnalysis.v_change')+'(V)'] = false
                // this.$set( option.legend.selected,this.$t('batteryAnalysis.v_change')+'(V)',false)
                // console.log(option,'option')
                myChart.setOption(option);
                window.onresize = myChart.resize
            })
            
        }
    },
};
</script>

<style  lang="less" scoped>
.batter-status-main-box{
    display: flex;
    height: 600px;
    .left-sub-box{
        flex: 17;
        background-color: #EFEFEF;
        border-radius: 10px;
        .title-box{
            font-size: 16px;
            border-bottom: 2px dotted #d6d6d6;
            padding: 9px 13px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .echarts-box{
            height: 500px;
            width: 100%;
        }
    }
    .right-sub-box{
        margin-left: 40px;
        flex: 7;
        background-color: #EFEFEF;
        .title-box{
            display: flex;
            align-items: center;
            font-size: 16px;
            i{
                transform: translateY(2px);
            }
        }
        .content-box{
            .img-box{
                width: 100px;
                height: 210px;
                background: url(../../../assets/img/battery2.png);
                background-size: 100px 230px;
                border-radius: 15px;
                margin: 0 auto;
                margin-top: 30px;
                position: relative;
                .data-text{
                    font-size: 20px;
                    color:#2b6500;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    z-index: 1000;
                }
                .percentage-box{
                    position: absolute;
                    bottom: 0px;
                    background-color: rgb(123, 216, 123);
                    // height: 100%;
                    max-height: 191px;
                    transition: all .3s;
                    width: 100%;
                    border-radius: 6px;
                }
                
            }
            .text-center-box{
                padding: 20px 20px;
                margin-top: 20px;
                div{
                    font-size: 15px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-top:2px dotted #ccc; 
                    padding: 5px 0px;
                }
                .green-color{
                    color: #6ca918;
                    font-size: 20px;
                }
                .grey-color{
                    color: #333;
                    font-size: 15px;
                }
            }
        }
    }
    .modal-box-center{
        div {
            display: flex;
            align-items: center;
            padding: 5px 0px;
        }
        div:first-child{
            margin-right: 20px;
        }
        div:last-child{
            color:#ED7523;
        }
    }
}
</style>
